<template>
    <div id="app">
        <!-- <transition :name="transitionName">
            <keep-alive> -->
                <router-view class="transitionBody"/>
            <!-- </keep-alive>
        </transition> -->
    </div>
</template>

<script>

export default {
    name: 'App',
    data(){
        return {
            transitionName: 'transitionLeft'
        }
    },
    components: {

    },
    watch: {
        '$route' (to, from) {
            const arr = [
                'index',
                'other',
                'typeList',
                'test',
                'eventType',
                'eventTypeAdd',
                'rememberDiaryList',
                'rememberDiary',
                'rememberBigThingList',
                'rememberBigThing',
            ]
            const compare = arr.indexOf(to.name)>arr.indexOf(from.name)
            this.transitionName = compare ? 'transitionLeft' : 'transitionRight'
        }
    }
}
</script>

<style>
/* .transitionBody{
    transition: all 0.4s ease-out;
}
.transitionLeft-enter,
.transitionRight-leave-active {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.transitionLeft-leave-active,
.transitionRight-enter {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
} */
#app{
    min-height: 100%;
    background: #F3F6FE;
}
</style>
<style lang="scss">
    @import "style/index";
</style>
<style lang="less">
    @import '~vux/src/styles/reset.less';
</style>
